<template>
	<view class="hotel_tab">
		<view class="hotel_box">
			<view class="box_item" @tap="changeTab('1')">
				<view class="icon">
					<image :src="tab1img"></image>
				</view>
				<view :class="tabIndex == '1'?'text_active':''">首页</view>
			</view>
			<view class="box_item" @tap="changeTab('2')">
				<view class="icon">
					<image :src="tab2img"></image>
				</view>
				<view :class="tabIndex == '2'?'text_active':''">订单</view>
			</view>
			<view class="box_item" @tap="changeTab('3')">
				<view class="icon">
					<image :src="tab3img"></image>
				</view>
				<view :class="tabIndex == '3'?'text_active':''">我</view>
			</view>
		</view>
	</view>
</template>

<script>

import { mapMutations } from 'vuex'
export default {
	methods: {
	   ...mapMutations({
			changeTabIndex: 'changeTab' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
	   }),

	  changeTab(index){ 
		  uni.createSelectorQuery().selectViewport().scrollOffset(res => {
		  	console.log("竖直滚动位置" + res.scrollTop);
		  			
		  			let viewObj = {
		  				type:this.$store.state.terminalType,
		  				tab:this.$store.state.tab,
		  				offSetTop:res.scrollTop
		  			}
		  			
		  			this.$emit('viewTop',viewObj);
		  			this.changeTabIndex(index);
					
					// #ifdef APP-PLUS
					 if(index == 3 || index == 2){
							this.$emit('changeColor','#3595f9');
							plus.navigator.setStatusBarStyle('light');
					 }else{
							this.$emit('changeColor','#FFFFFF');
							plus.navigator.setStatusBarStyle('dark');
					 }
					// #endif
					
					
		  			this.$emit('useTop',viewObj);
		  			
		  }).exec();
	  }
	},
	computed:{
		tabIndex(){
			return this.$store.state.tab;
		},
		tab1img(){
			return this.$store.state.tab=='1'?'/static/tabBar/home-active.png':'/static/tabBar/home.png'
		},
		tab2img(){
			return this.$store.state.tab=='2'?'/static/tabBar/order-active.png':'/static/tabBar/order.png'
		},
		tab3img(){
			return this.$store.state.tab=='3'?'/static/tabBar/center-active.png':'/static/tabBar/center.png'
		}
	}
};

</script>

<style lang="scss" scoped>
.hotel_tab{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 98upx;
	border-top: solid 1upx #e5e5e5;
	font-family: PingFang-SC-Medium;
	font-size: 24upx;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #999999;
	background-color: #ffffff;
	.hotel_box{
		width: 100%;
		height: 98upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.box_item{
			width: 33.333333%;
			text-align: center;
			.icon{
				text-align: center;
				image{
					width: 40upx;
					height: 40upx;
				}
			}
			.text_active{
				color:#3595f9;
			}
		}
	}
}
</style>
